<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Beijing Alcatel-Lucent Bus</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!-- Combo-handled YUI CSS files: -->
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.6.0/build/reset-fonts-grids/reset-fonts-grids.css">
    <!-- Combo-handled YUI JS files: -->
    <script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo/yahoo-min.js&2.6.0/build/event/event-min.js&2.6.0/build/connection/connection-min.js"></script>
    
    <script type="text/javascript" src="http://api.mapabc.com/fmp/v1.0/js/fmp.js?key=d1ea565d65e2c62189c68dc31b216eb337a443b187efc933f93946ad0d85188bdc2eea5511dba634"></script>
    <script type="text/javascript" src="http://api.mapabc.com/api/v1.0/js/ajaxsis.js?key=d1ea565d65e2c62189c68dc31b216eb337a443b187efc933f93946ad0d85188bdc2eea5511dba634"></script>
    <style type="text/css" rel="stylesheet">
    .mapStyle
    { 
           border-top:1px solid #999;
           border-right:1px solid #999;
           border-bottom:1px solid #999;
           border-left:1px solid #999;
           height: 520px;
       }
    </style>
    <meta http-equiv="content-type" content="text/html; charset=gb2312"/>
    <script type="text/javascript">
    var point = null;
    function searchByKeyword() {
        //mapObj.removeAllOverlays();//在每次执行新查询时，先删除已经查出的POI点
        mapObj.setZoomLevel(12);
        //以下是从文本框中得到查询参数
        var keyword = document.getElementById('keyword').value;
        if(keyword == ""){
            alert("请填写查询关键子，此处不能为空!");
            return false;
        }
        var sis = new MSISSearch();//自定义sis变量调用查询方法
        var searchpointpara = new MSearchPointPara();//自定义searchpointpara变量调用设置参数方法
        //设置自定义函数名称，sis.setSISCallbackFunction(自定义函数名称)，此处自定义函数名称要与下面自定义函数名称一致
        sis.setSISCallbackFunction(keywordCallBack); 
        //开始把得到的参数传入set方法中
        searchpointpara.setCitycode('010');
        searchpointpara.setKeyword(keyword);
        searchpointpara.setSearchType('');
        searchpointpara.setNumber(10);
        searchpointpara.setBatch(1);
        sis.searchByKeyword(searchpointpara);
        document.getElementById('submitbutton').value = '查询中...';
        document.getElementById('submitbutton').disabled = true;
    }
    function keywordCallBack(data) {
        document.getElementById('submitbutton').value = '提交';
        document.getElementById('submitbutton').disabled = false;
        var html = '<table width=\'100%\' border=\'0\'';
        if (data.count != 0) {
            for (var i=0; i<data.poilist.length; i++) {
                var pid = data.poilist[i].pguid;
                var x = data.poilist[i].x;
                var y = data.poilist[i].y;
                var pointStyle = new MStyle();//调用MStyle设置TIP窗口样式
                pointStyle.lineColor = 0xFFFFFF;//lineColor：线条颜色，RGB颜色格式
                pointStyle.lineSize = 2;//lineSize：线条的宽度。单位是像素
                pointStyle.fillColor = 0x4b8bd9;//fillColor：填充颜色，RGB颜色格式
                pointStyle.fillOpacity = 80;//fillOpacity：填充的不透明度
                pointStyle.labelColor = 0xFFFFFF;//labelColor：tips的label文字颜色，RGB颜色格式
                pointStyle.leading = 2;//leading：文字行距
                pointStyle.textContent = '<font color=\'#ffffff\'><b>'+data.poilist[i].name+'</b></font><br>';
                //MPointOverlay：在地图上显示为一个有位置的点，有自己的样式和tip，能够接收事件。
                point = new MPointOverlay(new MLatLng(y, x), i+1, pointStyle, i+1);
                mapObj.addOverlay(point, true);
                html += "<tr><td colspan='2' onclick=\"mapObj.setZoomLevel(15);mapObj.setCenterByLatLng('"+data.poilist[i].y+"','"+data.poilist[i].x+"');mapObj.openTipById('"+(i+1)+"')\"><div align='left' class='style3'><a href='javascript:void(0)'>"+(i+1)+"  "+data.poilist[i].name+"</a></div></td></tr>";
            }
        } else {
            alert('对不起！北京没这地儿!');
        }
        html += '</table>';
        //console.log(html);
        document.getElementById('result').innerHTML = html;
    }
    var handleSuccess = function(o) {
        if (o.responseText != undefined) {
            alert(o.responseText);
            
            // draw custom point
            mapObj.removePointById('3000');
            drawCustomPointImg(o.argument.clickLat, o.argument.clickLng, '{{zhandian.zhandianmingcheng}}'); 
        } else {
            alert('AJAX NOT SUCCESS');
        }
    }
    var handleFailure = function(o) {
        alert('AJAX Failure');
    }
    var callback = {
        success: handleSuccess,
        failure: handleFailure,
        argument: []
    }
    
    function drawCustomPointImg(lat, lng, textcontent) {
        var pointStyle = new MStyle();
        pointStyle.textContent = textcontent
        var customPoint = new MCustomPointOverlay(new MLatLng(lat,lng), 
            "http://itool.appspot.com/bjlucentbus/static_dir/stop.png", 
            pointStyle, "3000");
        
        mapObj.addOverlay(customPoint, true);//true 为自动调整视野    
    }
    
    function rightMenuClick(event) {
        var args = event.args.split(',') 
        var postdata = 'key={{ zhandian.key }}&clickLng='+args[8]+'&clickLat='+args[9];
        var sUrl = 'ajax?'+postdata;
        callback.argument.clickLng = args[8];
        callback.argument.clickLat = args[9];
        var request = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback); 
    }
    
    </script>
</head>
<body>
<div id="doc3" class="yui-t7">
    <div id="hd">
        <div class="yui-gf">
            <div class="yui-u first">
                <a href="/bjlucentbus/"><img src="static_dir/logo.jpg" border="0"></a>
            </div>
            <div class="yui-u">
                <div class="yui-t4">
                    <div id="yui-main">
                        <div class="yui-b">
                            <span style="font-size: 138.5%">Beijing Alcatel-Lucent Bus</span>
                            <span style="font-size: 77%">(author: A.TNG)</span><br>
                            <span style="font-size: 77%">contact: tang.jiyu at gmail dot com / ji_yu.tang at lucent-alcatel dot com</span>
                        </div>
                    </div>
                    <div class="yui-b">
                        <ul>
                        <li><a href="static_dir/history.html" target="_blank">更新历史</a></li>
                        <li><a href="http://tinyurl.com/58rhwa" target="_blank">班车地图1.0 RC Q&A</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>       
    </div>
    <div id="bd">
    <div class="yui-gf">
    <div class="yui-u first">
    <!-- YOUR DATA GOES HERE -->
    <div>
        <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#f8f8f8" style="border:1px solid #e1e1e1; margin-top:20px;" >
          <tr>
            <td height="120" valign="top">
         <table width="100%" border="0">
              <tr>
                <td height="50" colspan="2"><div align="center"><h1>查询</h1></div></td>
              </tr>
              <tr>
                <td><div align="right">关键字：</div></td>
                <td><input name="keyword" type="text" id="keyword" value="{{ zhandian.zhandianmingcheng }}" /></td>
              </tr>
              <tr>
                <td><div align="right"></div></td>
                <td><input type="button" name="Submit" id="submitbutton" value="提交" onclick="searchByKeyword()" /></td>
              </tr>
            </table>
            </td>
          </tr>
          <tr>
            <td width="100%" height="30">
              <a href="line?line={{banchekey}}">返回班车线路</a>
            </td>
          </tr>          
        </table>
        <table width="100%" border="1" align="center" cellpadding="0" cellspacing="0" bgcolor="#f8f8f8" style="border:1px solid #e1e1e1; margin-top:20px;" >
          <tr>
            <td width="100%" height="350">
            <div style="width:100%; height:300px; overflow-y:auto;">
                <div id="result_start_name"></div>
                <div id="result_end_name"></div>
                <div id="result"></div>
            </div>
            </td>
          </tr>
        </table>
    </div>
    </div>
    <div class="yui-u">
    <!-- TODO: height最好能自动拉伸 -->
    <!-- YOUR DATA GOES HERE -->
    <div id="mapObj" class="mapStyle"></div>
    </div>
</div>
<script type="text/javascript">
//创建一个MmapOptions对象
var mapOptions = new MMapOptions();
//设置地图组件的Id
mapOptions.mapId = "fmptest";
//设置地图的初始Zoom值
mapOptions.zoomLevel = 12;
//设置地图的中心点
mapOptions.center = new MLatLng("LQGXRMMVKHDLL", "JIOMSTNTPOLHLH");
//创建地图对象
var mapObj = new MMap("mapObj", mapOptions);
function mapInited(event)
{
    // 设置鹰眼
    mapObj.showNavigator(true);
    mapObj.setCompassScale(60);
    
    // 设置右键菜单
    mapObj.addEventListener(MMap.EVENT_POPUP_MENU_CLICK,rightMenuClick);
    mapObj.addPopupMenuItem('班车这里停', 'menu1');
    
    // 加载完地图后既开始search
    searchByKeyword();
    
    // 如果datastroe中保存了相关的位置数据，则画出来
    lat = '';
    lng = '';
    {% if zhandian.lng and zhandian.lat %}
    lat = '{{zhandian.lat}}';
    lng = '{{zhandian.lng}}';
    zhandianmingcheng = '{{zhandian.zhandianmingcheng}}';
    if ((lat != 'None') && (lng != 'None')) {
        drawCustomPointImg(lat,lng, zhandianmingcheng);
    }
    {% endif %}
}
mapObj.addEventListener(MMap.EVENT_MAP_INITIALIZED, mapInited);
</script>
    </div>
    <div id="ft">
    </div>
</body>
</html>
